<template>
    <div class="inbound-statistics-container">
        <el-card header="入库统计">
            <!-- 统计概览卡片 -->
            <div class="statistics-overview">
                <el-card shadow="hover" class="stat-card">
                    <div class="stat-item">
                        <div class="stat-value">{{ statisticsData.totalQuantity || 0 }}</div>
                        <div class="stat-label">今日入库总量</div>
                    </div>
                </el-card>

                <el-card shadow="hover" class="stat-card">
                    <div class="stat-item">
                        <div class="stat-value">{{ statisticsData.totalCount || 0 }}</div>
                        <div class="stat-label">今日入库记录数</div>
                    </div>
                </el-card>
            </div>

            <!-- 操作员统计 -->
            <el-card header="操作员统计" shadow="hover" class="section-card">
                <el-table :data="operatorStatsList" style="width: 100%">
                    <el-table-column prop="operator" align="center" label="操作员" />
                    <el-table-column prop="count" align="center" label="入库记录数" />
                </el-table>
            </el-card>

            <!-- 供应商统计 -->
            <el-card header="供应商统计" shadow="hover" class="section-card">
                <el-table :data="supplierStatsList" style="width: 100%">
                    <el-table-column prop="supplier" align="center" label="供应商" />
                    <el-table-column prop="count" align="center" label="入库记录数" />
                </el-table>
            </el-card>

            <!-- 今日入库记录列表 -->
            <el-card header="今日入库记录" shadow="hover" class="section-card">
                <el-table :data="statisticsData.data || []" style="width: 100%">
                    <el-table-column prop="inboundNumber" label="入库单号" width="180" />
                    <el-table-column prop="vaccineName" label="疫苗名称" />
                    <el-table-column prop="batchNumber" label="批次号" />
                    <el-table-column prop="quantity" label="数量" width="100" />
                    <el-table-column prop="supplier" label="供应商" />
                    <el-table-column prop="operator" label="操作员" />
                    <el-table-column prop="inboundTime" label="入库时间" width="160" />
                </el-table>
            </el-card>
        </el-card>
    </div>
</template>

<script setup>

import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'
import axios from 'axios'

// 统计数据
const statisticsData = ref({})
// 加载统计数据的函数
const loadStatisticsData = async () => {
    const loadingInstance = ElLoading.service({
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    await axios.get('http://127.0.0.1:8081/vaccine/inbound/today',
        {
            headers: {
                'X-Admin-Token': sessionStorage.getItem("token")
            }
        }).then((req) => {
            statisticsData.value = req.data
        }).catch((error) => {
            ElMessage.error('请求失败，请检查网络连接');
        }).finally(() => {
            loadingInstance.close();
        })

}

// 计算操作员统计列表
const operatorStatsList = computed(() => {
    if (!statisticsData.value.operatorStats) return []

    return Object.entries(statisticsData.value.operatorStats).map(([operator, count]) => ({
        operator,
        count
    }))
})
// 计算供应商统计列表
const supplierStatsList = computed(() => {
    if (!statisticsData.value.supplierStats) return []

    return Object.entries(statisticsData.value.supplierStats).map(([supplier, count]) => ({
        supplier,
        count
    }))
})
// 页面加载时获取统计数据
onMounted(() => {
    loadStatisticsData()
})

</script>
<style scoped>
.inbound-statistics-container {
    padding: 20px;
}

.statistics-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card {
    text-align: center;
    background: linear-gradient(135deg, #c2d5ff 0%, #b0c4f8 100%);
    color: white;
}

.stat-item {
    padding: 20px;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

.section-card {
    margin-bottom: 20px;
}

.section-card :deep(.el-card__header) {
    background: #f5f7fa;
    font-weight: bold;
}
</style>